import React, { useEffect, useState } from "react";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import http from "../../api/http";
import { NavBar, Collapse, InfiniteScroll, Switch } from "antd-mobile";
import styles from "./list.module.css";
function Index() {
  const navigate = useNavigate();
  const [sq] = useSearchParams();
  const start = sq.get("start");
  const end = sq.get("end");
  const date = sq.get("date");
  const [page, setPage] = useState(1);
  const [isSpeed, setisSpeed] = useState(false); //是否高铁
  const [isSeat, setisSeat] = useState(false); //收否有票
  const [isDesc, setisDesc] = useState(false); //时间排序
  const [tick, setTick] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  const getList = async () => {
    const res = await http.post("/api/trip/train", {
      start,
      end,
      date,
      page,
      isDesc,
      isSeat,
      isSpeed,
    });
    const { data, code } = res.data;
    console.log(res.data);
    if (code === 200) {
      setTick([...tick, ...data]);
      setPage((prev) => prev + 1);
    }
  };
  useEffect(() => {
    getList();
  }, []);
  const handelDetail = (id) => {
    navigate(`/detail/${id}`);
  };
  return (
    <div className={styles.home_ro}>
      <NavBar onBack={() => navigate("/")}>车票列表</NavBar>
      <div>
        {tick.map((item, ind) => (
          <div
            key={ind}
            className={styles.list_st}
            onClick={() => handelDetail(item.id)}
          >
            <span>{item.start}</span>
            <span>{item.startTime}</span>
            <span>{item.end}</span>

            <span>
              商务座 : <b>有票</b>
            </span>
            <span>
              一等座 : <b>有票</b>
            </span>
            <span>
              二等座 : <b>有票</b>
            </span>
            <div className={styles.list_tick}>
              ￥ <span>{item.tick.secondTick}</span>
            </div>
          </div>
        ))}
      </div>

      <InfiniteScroll loadMore={getList} hasMore={hasMore} />
      <div className={styles.home_sw}>
        <div>
          <Switch
            checked={isDesc}
            onChange={(val) => {
              setisDesc(val);
              setPage(1);
              getList([]);
            }}
          />
          是否高铁
        </div>
        <div>
          <Switch
            checked={isSeat}
            onChange={(val) => {
              setisSeat(val);
              setPage(1);
              getList([]);
            }}
          />
          收否有票
        </div>
        <div>
          <Switch
            checked={isSpeed}
            onChange={(val) => {
              setisSpeed(val);
              setPage(1);
              getList([]);
            }}
          />
          价格
        </div>
      </div>
    </div>
  );
}

export default Index;
